<template>
    <div class="furnaceSteam" :style="popupStyle">
        <div class="item" v-for="(item, index) in state.dataList">
            <div class="itemLeft">
                <div class="square"></div>
                <div>{{ item.name }}</div>
            </div>
            <div class="temp">{{ item.temperature }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { dataTool } from 'echarts';


const props = defineProps({
    top: {
        type: String,
        default: '0px'
    },
    left: {
        type: String,
        default: '0px'
    },
    data: {
        type: Array,
        default: []
    }
})
let popupStyle = reactive({
    position: 'absolute' as 'absolute',
    top: props.top,
    left: props.left,
})
let state = reactive({
    dataList: [
    ] as any,
})
state.dataList = props.data
console.log('popupStyle', state.dataList);

</script>

<style lang="scss" scoped>
.furnaceSteam {
    width: vh(277);
    min-height: vh(100);
    z-index: 999;
    background: rgba(0, 25, 35, 0.7);
    border: vh(1) solid #00B1E1;
    padding-left: vh(13);
    padding-right: vh(18);
    padding-top: vh(12);

    .item {
        // border: 1px solid #ddd;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(12);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: vh(12);
        .itemLeft {
            display: flex;
            align-items: center;
            .square {
                width: vh(4);
                height: vh(4);
                background: #00B1E1;
                margin-right: vh(8);
            }

        }
    }
}
</style>